﻿<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/boetv/yieldChart" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="yieldChartHList" />
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel" />
            <label>PartName：</label>
            %{--<g:select name="productid" from="${productList}" data-toggle="selectpicker" data-live-search="true" optionKey="PART_DESC" optionValue="PART_DESC" value="${productid}" noSelection="['':'--ALL--']" />&nbsp;--}%
            <input name="productid" value="${productid}"/>
           <label>StartTime<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="startTime" class="form-control"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd"
                   size="18" id="start-date-input" readonly value="${startTime.format('yyyy-MM-dd')}">&nbsp;
            <label>EndTime<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="endTime" class="form-control"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd"
                   size="18" id="end-date-input" readonly value="${endTime.format('yyyy-MM-dd')}" >&nbsp;
            <button type="submit" class="btn-default" data-icon="search">Query</button>&nbsp;
            <button type="button" class="btn-blue" onclick="javascript:bjuiExportExl('#pagerForm','${request.getContextPath()}/boetv/exportExcel')" data-icon="file-excel-o" title="导出Excel">Excel</button>&nbsp;
        </div>
    </form>
</div>
<div class="bjui-pageContent">
    <div style="margin:15px auto 0; width:96%;">
        <div class="row" style="padding: 0 8px;">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-line-chart fa-fw"></i>In Out Put Chart</h3>
                    </div>
                    <div class="panel-body">
                        <div style="mini-width:400px;height:450px;" id="cellGlassOutputDiv"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="margin:15px auto 0; width:96%;">
        <div class="row" style="padding: 0 8px;">
            <div class="col-md-12" id="glassOutReportTable">
                <g:if test="${dataListNo.size()>0}">
                    <table data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                        <thead>
                        <tr>
                            <th width="80" align="center">PartName</th>
                            %{--<th width="50" align="center">线体</th>--}%
                            <th width="50" align="center">InQty</th>
                            <th width="50" align="center">OutQty</th>
                            <th width="50" align="center">Yield</th>
                            <th width="80" align="center">SumTime</th>

                        </tr>
                        </thead>
                        <tbody>
                        <g:each in="${dataListNo}" status="i" var="dataInstance">
                            <tr>
                                <td>${dataInstance.PART_DESC}</td>
                                %{--<td>${dataInstance.LINE_ID}</td>--}%

                                <td>${dataInstance.PUT_QTY}</td>
                                <td>${dataInstance.OUT_QTY}</td>
                                <td>${dataInstance.YIELD}</td>
                                <td>${dataInstance.SUM_TIME}</td>

                            </tr>
                        </g:each>
                        </tbody>
                    </table>
                </g:if>
            </div>
        </div>
    </div>
</div>

<script src="${resource(dir: 'js/echarts', file: 'echarts.js')}" type="text/javascript"/>
<script src="${resource(dir: 'js/echarts', file: 'echarts-tool.js')}" type="text/javascript"/>
<script type="text/javascript">
    $(function () {
        var contextPath = "${request.getContextPath()}";
        eChartsTool.init(contextPath);
        var theme = 'shine';
        var stackText = 'Group';
        var rotateValue = 45;

        var typeData = [];
        var legendData = [];
        <g:each in="${legendDataList}">
        legendData.push('${it}');
        if(${percentItemList.contains(it)}){
            typeData.push('line');
        }else{
            typeData.push('bar');
        }
        </g:each>

        var yAxisData = ['','%'];

        var xAxisData = [];
        <g:each in="${dayList}">
        xAxisData.push('${it}');
        </g:each>

        var seriesData = ${seriesData};

        eChartsTool.init(contextPath);
        var monthOption = eChartsTool.initTwoyAxisOption(legendData, xAxisData, seriesData, typeData, yAxisData, rotateValue);
        var montChart = document.getElementById("cellGlassOutputDiv");
        eChartsTool.setOption(theme, montChart, monthOption);
/*
        $.CurrentNavtab.find('#start-date-input,#end-date-input').datetimepicker({
            format:'yyyy-mm-dd hh',
            autoclose: true,
            todayBtn: true,
            startView:1,
            minView:1,
            pickerPosition: "bottom-left",
            language:'zh-CN',
            startDate:'2016-01-01'
        });

        $.CurrentNavtab.find('.selectpicker').selectpicker();
		*/
    })
</script>